<template>
  <div class="designPage">

    <pageLoading v-if="page.loading" :size="600"></pageLoading>

    <div class="design-main" v-if="!page.loading">

      <div class="design-main-form">

          <pageForm :data="formItem" ref="form"></pageForm>

      </div>

      <bottomBtn @prev="pagePrev" @next="pageNext"></bottomBtn>

      <Modal
        v-model="modal.state"
        title="提示"
        :mask-closable="false"
        :closable="false"
        @on-ok="asyncOK">
        <h2>
          是否确认选择该版型？
        </h2>
      </Modal>

    </div>

  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex';
  import { getDesign } from "api/getDesign";
  import bottomBtn from "base/bottomBtn.vue";
  import pageLoading from "base/pageLoading";
  import pageForm from "base/pageform";

  export default {
    props: {},
    data() {
      return {
        page: {
          loading: true,
        },
        formItem:[],
        modal:{
          state:false
        },
      }
    },
    methods: {
      ...mapMutations({
        "setNavIndex": 'SET_NAVINDEX',
        "setDesignData":'SET_DESIGNDATA'
      }),
      pagePrev() {
        this.setNavIndex(this.navIndex - 1);
      },
      goto(page){
        this._getList(page);
      },
      pageNext(){
        this.$refs.form.vaildForm()?this.modal.state = true:this.$Notice.info({title: '错误', desc:'表单验证错误'});
      },
      asyncOK(){
          this.setNavIndex(this.navIndex + 1);
          this.setDesignData(this.$refs.form.normalizeForm());
      },
      _getList() {
        this.page.loading = true;
        getDesign({id: this.type,goods:this.goodsId,lining:this.liningId}).then((Rs) => {
          this.page.loading = false;
          this.formItem = Rs.data;
        }).catch((error)=>{
          this.setNavIndex(1);
        })
      },
      _jugeData(){
        if(this.stereotype === ""){
          this.pagePrev();
        }
      },
    },
    components: {
      bottomBtn,
      pageLoading,
      pageForm
    },
    computed: {
      ...mapState([
        'type',
        'goodsId',
        'navIndex',
        'liningId',
        "stereotype"
      ])
    },
    mounted() {

    },
    updated(){

    },
    created() {
     this._getList();
    },
    activated(){
      this._jugeData();
    },
    deactivated(){

    },
    watch:{
      stereotype(){
        this._getList();
      }
    }
  }
</script>

<style lang="less">
  @import "../../common/style/helpers/mixins.less";

  .designPage{

    .design-main-form{
      padding: 25px 0;

      .ivu-form-item-label{
        text-align: center;
        font-size: 14px;
      }

      .ivu-form-item-content{
        .clearfix();
      }
    }

    .content-page{
      text-align: center;
    }
  }

</style>
